<template>
	<view class="info">
		<view class="title">
			<view :class="scrollTo == 'view0' ? 'block active' : 'block'" @tap="clickTab('view0')">基本信息</view>
			<view :class="scrollTo == 'view1' ? 'block active' : 'block'" @tap="clickTab('view1')">销售信息</view>
			<view :class="scrollTo == 'view2' ? 'block active' : 'block'" @tap="clickTab('view2')">规划概况</view>
			<view :class="scrollTo == 'view3' ? 'block active' : 'block'" @tap="clickTab('view3')">物业信息</view>
			<view :class="scrollTo == 'view4' ? 'block active' : 'block'" @tap="clickTab('view4')">项目简介</view>
		</view>
		<scroll-view class="scrollView" :scroll-into-view="scrollTo" scroll-y>
			<view class="main" id="view0">
				<view class="second_titile">基本信息</view>
				<view class="row">
					<text class="name">楼盘名称</text>
					<text class="content">{{ data.name }}</text>
				</view>
				<!-- <view class="row">
					<text class="name">楼盘特色</text>
					<text class="content">住宅</text>
				</view> -->
				<view class="row">
					<text class="name">参考均价</text>
					<text class="content">{{ data.avg_price }}元/m²</text>
				</view>
				<view class="row">
					<text class="name">参考总价</text>
					<text class="content">{{ data.total_amount }}元/m²</text>
				</view>
				<view class="row">
					<text class="name">物料类型</text>
					<text class="content" v-if="data.type == 1">住宅</text>
					<text class="content" v-if="data.type == 2">别墅</text>
					<text class="content" v-if="data.type == 3">公寓</text>
					<text class="content" v-if="data.type == 4">商铺</text>
					<text class="content" v-if="data.type == 5">写字楼</text>
				</view>
				<view class="row">
					<text class="name">建筑类型</text>
					<text class="content" v-if="data.build_type == 1">毛坯</text>
					<text class="content" v-if="data.build_type == 2">简装修</text>
					<text class="content" v-if="data.build_type == 3">带装修</text>
				</view>
				<!-- 			<view class="row">
					<text class="name">装修类型</text>
					<text class="content">住宅</text>
				</view> -->
				<view class="row">
					<text class="name">产权年限</text>
					<text class="content">{{ data.property_years }}年</text>
				</view>
				<view class="row">
					<text class="name">开&nbsp;发&nbsp;&nbsp;商</text>
					<text class="content">{{ data.developer }}</text>
				</view>
				<view class="row">
					<text class="name">楼盘地址</text>
					<text class="content">{{ data.address }}</text>
				</view>
			</view>
			<view class="main" id="view1">
				<view class="second_titile">销售信息</view>
				<view class="row">
					<text class="name">销售状态</text>
					<text class="content">{{ data.status == 1 ? '在售' : '下线' }}</text>
				</view>
				<view class="row">
					<text class="name">售楼地址</text>
					<text class="content">{{ data.seller_floor }}</text>
				</view>
				<view class="row">
					<text class="name">售卖楼栋</text>
					<text class="content">{{ data.seller_tung }}</text>
				</view>
				<!-- <view class="row">
					<text class="name">售卖户型</text>
					<text class="content"></text>
				</view> -->
				<view class="row">
					<text class="name">最新开盘</text>
					<text class="content">{{ data.open_estate }}</text>
				</view>
			</view>
			<view class="main" id="view2">
				<view class="second_titile">规划概况</view>
				<view class="row">
					<text class="name">占地面积</text>
					<text class="content">{{ data.cover_area }}m²</text>
				</view>
				<view class="row">
					<text class="name">建筑面积</text>
					<text class="content">{{ data.build_surface }}m²</text>
				</view>
				<view class="row">
					<text class="name">容积率</text>
					<text class="content">{{ data.volume_ratio }}</text>
				</view>
				<view class="row">
					<text class="name">绿化率</text>
					<text class="content">{{ data.green_rate }}%</text>
				</view>
				<view class="row">
					<text class="name">规划车位</text>
					<text class="content">{{ data.parking_place }}</text>
				</view>
				<view class="row">
					<text class="name">车位配比</text>
					<text class="content">{{ data.parking_rate }}</text>
				</view>
				<view class="row">
					<text class="name">规划栋数</text>
					<text class="content">{{ data.planning_span }}</text>
				</view>
				<view class="row">
					<text class="name">规划户数</text>
					<text class="content">{{ data.planning_house }}</text>
				</view>
			</view>
			<!-- 物业信息 -->
			<view class="main" id="view3">
				<view class="second_titile">物业信息</view>
				<view class="row">
					<text class="name">供暖方式</text>
					<text class="content" v-if="data.heating_type == 1">自采暖</text>
				</view>
				<view class="row">
					<text class="name">供&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水</text>
					<text class="content" v-if="data.water_supply == 1">民用</text>
				</view>
				<view class="row">
					<text class="name">供&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电</text>
					<text class="content" v-if="data.power_supply == 1">民电</text>
				</view>
				<view class="row">
					<text class="name">物业费用</text>
					<text class="content">{{ data.property_costs }}</text>
				</view>
				<view class="row">
					<text class="name">物业公司</text>
					<text class="content">{{ data.property_company }}</text>
				</view>
			</view>
			<!-- 项目简介 -->
			<view class="main" id="view4">
				<view class="second_titile">楼盘信息</view>
				<view class="jianjie" v-html="data.property_desc"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: null,
			data: {},
			scrollTo: 'view0'
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.id = 1;
		this.getData();
	},
	methods: {
		getData() {
			this.$request
				.post('/landed/getInfo', {
					data: {
						type: 1, //1：楼盘,2：二手房,3:租房
						id: this.id
					}
				})
				.then(res => {
					this.data = res.data.data.list;
				});
		},
		clickTab(view) {
			this.scrollTo = view;
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}
.info {
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 100upx;
	box-sizing: border-box;
}
.title {
	width: 100%;
	height: 100upx;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 20upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $uni-font-size-lg;
	color: #888888;

	.block {
		box-sizing: border-box;
		height: 100%;
		line-height: 100upx;
	}
	.block.active {
		color: #333;

		border-bottom: 4upx solid red;
	}
}
.scrollView {
	width: 100%;
	height: 100%;
}
.main {
	width: 100%;
	padding: 0 20upx;
	padding-bottom: 20upx;
	border-bottom: 2upx solid #b2b2b2;
	box-sizing: border-box;

	.second_titile {
		font-size: $uni-font-size-base;
		color: #333;
		line-height: 1.8em;
	}
	.row {
		width: 100%;
		line-height: 1.8em;
		font-size: $uni-font-size-base;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.name {
			display: inline-block;
			margin-right: 20upx;
			min-width: 150upx;
		}
	}
	.jianjie {
		font-size: $uni-font-size-base;
		color: #333;
	}
}
</style>
